<template>
  <div class="shopsList">

    <div class="content">
      <el-row>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>店铺列表</el-breadcrumb-item>
        </el-breadcrumb>

      </el-row>
      <el-row :gutter="12">



        <el-col :span="16">
          <el-input
            size="small"
            placeholder="输入关键词"
            v-model="vm.query.keyword"
            prefix-icon="el-icon-search"
            @change="query({reload:true})"
            class="input-with-select">
            <el-button
              size="small"

              @click="vm.query.keyword='',query({reload:true})"
              slot="append"
            >清除
            </el-button>

          </el-input>
        </el-col>



      </el-row>

      <el-table
        :data="vm.models"
        stripe
        show-summary
        :row-class-name="tableRowClassName"
        :summary-method="getSummaries"
        border style="width: 100%">



        <el-table-column

          prop="id"
          label="#"
          width="60">
        </el-table-column>

        <el-table-column

          prop="logo"
          label="店标"
          width="">
          <template slot-scope="scope">
            <span><img width="60px" :src="scope.row.logo" alt=""> </span>

          </template>
        </el-table-column>
        <el-table-column

          prop="shop_name"
          label="店铺名"
          width="">
        </el-table-column>
        <el-table-column

          prop="city"
          label="城市"
          width="">

        </el-table-column>
        <el-table-column

          prop="create_time"
          label="申请时间"
          width="">

        </el-table-column>
        <el-table-column

          prop="master_name"
          label="店长姓名"
          width="">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if='scope.row.master_name'
              @click="queryTag(scope.row.master_name)"
              size="small"

            >{{ scope.row.master_name}}
            </el-button>


          </template>
        </el-table-column>
        <el-table-column
          label="电话"
          width="">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if='scope.row.phone'
              @click="queryTag(scope.row.phone)"
              size="small"

            >{{ scope.row.phone}}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column
          sortable
          prop="sales_number"
          label="销售顾问数"
          width="">
        </el-table-column>


        <el-table-column
          align="right"
          label="操作"
          >
          <template slot-scope="scope" >

            <router-link :to="{ name:'shopsEdit',params: { id: scope.row.id }}" append>
              <el-button size="mini">

                编辑
              </el-button>
            </router-link>

            <el-button
              @click="del(scope.row.id)"
              size="mini"
              type="danger" v-if="!scope.row.is_head_shop">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        v-if="!vm.isLoading"
        @size-change="sizeChange($event)"
        @current-change="pageChange($event)"
        :page-size="vm.meta.size"
        :page-sizes="[10,20,30,50,100,1000]"
        :current-page="vm.meta.page"
        layout="total,sizes,prev, pager, next,jumper"
        :total="vm.meta.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import * as Models from "@/api/shops";
import pages from "@/mixins/pages";

export default {
  name: "shopsList",
  computed: {},
  mixins: [pages],
  components: {},
  data() {
    return {
      vm: {
        models: [],
        isLoading: false,
        isError: false,
        meta: {},
        query: {}
      },
      Models
    };
  },

  mounted() {
    this.query({ reload: true });
  },
  methods: {

    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '本页总计';
          return;
        }
        const values = data.map((item) => {
          // Number(item[column.property])
          if (column.property == 'sales_number') {
            return Number(item[column.property])
          } else {
            return undefined
          }

        });
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 人';
        } else {
          sums[index] = '-';
        }
      });

      return sums;
    },


  }
};
</script>
